<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非单文件组件的注意点</title>
    <script src="../commonjs/vue.js"></script>
</head>
<body>
    <div id="root">
        <school></school>
    </div>
    <script>
        Vue.config.productionTip = false;//关闭开发提示
        //创建组件完整写法
/*        const school = Vue.extend({
            template:`
              <div>
                <h2>学校名称:{{name}}</h2>
                <h2>学校地址:{{address}}</h2>
              </div>
            `,
            data(){
                return{
                    name:'武威职业学院',
                    address:'武威市凉州区皇台路'
                }
            }
        })*/
        //创建组件 简写
        const school = {
            template:`
              <div>
                <h2>学校名称:{{name}}</h2>
                <h2>学校地址:{{address}}</h2>
              </div>
            `,
            data(){
                return{
                    name:'武威职业学院',
                    address:'武威市凉州区皇台路'
                }
            }
        }
        new Vue({
            el:'#root',
            components:{
                school  //同名，可以不用school:school来写
                // 'my-school':school  /*使用-连接，必须使用'' 开发者工具解析为MySchool*/
                // MySchool:school  /*报错,官方推荐写法，但仅限于脚手架*/
            },
            data:{

            }
        })
    </script>
</body>
</html>